import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { AddDeptReqDto, DepartmentDto, EditDeptReqDto } from '@/api/system/types'
import { addDept, deleteDept, getSystemUserList, updateDept } from '@/api/system'
import DialogAddDept from './DialogAddDept'
import { EllipsisOutlined, FolderOpenFilled, PlusCircleOutlined } from '@ant-design/icons-vue'
import { Card, Dropdown, Menu, MenuItem, Tree } from 'ant-design-vue'
import type { DataNode, EventDataNode } from 'ant-design-vue/es/tree'
import type { Key } from 'ant-design-vue/es/vc-tree/interface'
import type { AddType, AntTreeDto } from '@/api/types'
import { confirm } from '@/utils/util'

@Component
export class DepartmentView extends Render {
    @Prop() deptData!: AntTreeDto<DepartmentDto>[]

    showDept = false
    isRoot = false // 是否未根部门
    addType = 'add' as AddType // 新增还是编辑
    curItem = {} as DepartmentDto //当前点击的部门信息
    curNode = {} as Node // 当前点击的节点信息，主要为了获取parentId

    @Emit('refresh')
    handleRefresh() { }

    @Emit('click')
    handleClick(item: EventDataNode) {
        return item
    }

    onShow(isRoot: boolean, addType: AddType, node?: DataNode) {

        console.log(33333, node)

        this.showDept = true
        // this.isRoot = isRoot
        // this.addType = addType
        // if (node) {
        //     this.curItem = (node?.data || {} )as DepartmentDto
        //     this.curNode = node
        // }
    }

    async onConfirm({data, close}: {data: Record<string, any>; close: () => void}) {
        if(this.addType === 'add') {
            // 新增逻辑
            const params = {
                parentId: this.curItem.id ?? 100, // 新增根部门时，parentId传100
                status: 0,
                ...data
            } as AddDeptReqDto
            await addDept(params)
        } else {
            // 编辑逻辑
            const params = {
                deptId: this.curItem.id,
                // parentId: this.curNode.parent.id,
                isEditChannel: 0,
                status: 0,
                ...data
            } as EditDeptReqDto
            await updateDept(params)
        }
        this.handleRefresh()
        close()
    }

    async onDelete(data: DataNode) {
        const res = await getSystemUserList({
            deptId: data.id,
            pageNum: 1,
            pageSize: 10
        })
        const text = res.total ? `该组有${res.total}名成员，删除分组后，将自动归为上级成员，是否确认删除么？` : '是否确认删除'
        await confirm(text, '提示')
        deleteDept(data.id)
        this.handleRefresh()
    }

    onNodeClick(selectedKeys: Key[], info: { node: EventDataNode; selected: boolean; selectedNodes: DataNode[] }) {
        console.log(321, selectedKeys, info)
        this.handleClick(info.node)
    }

    render() {
        return (
            <>
                <Card >
                    <div class="flex justify-between border-b-1 border-b-solid pb-10px">
                        <div class="font-bold cursor-pointer" onClick={() => this.handleClick({
                            id: 0,
                            key: 0,
                            label: '全部组员列表',
                            checked: true
                        })}>蓝豚互动</div>
                        <div class="cursor-pointer" onClick={() => this.onShow(true, 'add')}>
                            <PlusCircleOutlined></PlusCircleOutlined>
                        </div>
                    </div>
                    <div class="pt-10px">
                        <Tree
                            ref="treeRef"
                            blockNode={true}
                            treeData={this.deptData}
                            defaultExpandAll={true}
                            onSelect={this.onNodeClick}
                            checkStrictly={true}
                            v-slots={{
                                title: (data: DataNode) => {
                                    return (
                                        <div class="flex justify-between">
                                            <div class="flex items-center">
                                                <FolderOpenFilled />
                                                <span class="pl-10px">{data.label}</span>
                                            </div>
                                            <Dropdown v-slots={{
                                                default: () => {
                                                    return <div>
                                                        <EllipsisOutlined></EllipsisOutlined>
                                                    </div> 
                                                },
                                                overlay: () => {
                                                    return <Menu>
                                                        <MenuItem onClick={() => this.onShow(false, 'add', data)}>添加子分组</MenuItem>
                                                        <MenuItem onClick={() => this.onShow(false, 'edit', data)}>修改</MenuItem>
                                                        <MenuItem onClick={() => this.onDelete(data)}>删除</MenuItem>
                                                    </Menu>
                                                }
                                            }}>
                                            </Dropdown>
                                        </div>
                                    )
                                }
                            }}
                        ></Tree>
                    </div>
                </Card>
                <DialogAddDept v-model:show={this.showDept} isRoot={this.isRoot} type={this.addType} itemData={this.curItem} onConfirm={this.onConfirm}/>
            </>
        )
    }
}

export default toNative<{ deptData: DepartmentDto[] }, {refresh: () => void, click: (item: DepartmentDto) => void}>(DepartmentView)
